import React, { useState, useImperativeHandle, forwardRef } from "react";
import { DatePicker, Space, Input, Select, Button } from "antd";
import lodash from "lodash";
export const initSearchValue = {
  bucketName: "evangao-backend-development",
  filePath: "internation/",
  "start-after": "internation/",
};
const searchNav = forwardRef(props => {
  const [filterInfo, setFilterInfo] = useState(lodash.cloneDeep(initSearchValue));
  function searchChange(value, type) {
    const _filterInfo = filterInfo;
    _filterInfo[type] = value;
    setFilterInfo(pre => ({ ...pre, ..._filterInfo }));
  }
  function handleSearch() {
    props.search && props.search(filterInfo);
  }
  return (
    <div className="table-list-searchNav">
      <div className="search-item">
        <span className="search-label"> Bucket名称：</span>
        <Input
          onChange={v => searchChange(v.target.value, "bucketName")}
          value={filterInfo.bucketName}
          style={{ width: "300px" }}
        />
      </div>
      <div className="search-item">
        <span className="search-label"> 文件夹路径：</span>
        <Input
          onChange={v => searchChange(v.target.value, "filePath")}
          value={filterInfo.filePath}
          style={{ width: "300px" }}
        />
      </div>
      <div className="search-item">
        <Button type="primary" onClick={handleSearch}>
          查询
        </Button>
      </div>
    </div>
  );
});

export default searchNav;
